<template>
    <el-row class="row">
      <el-col :span="2">
        <el-image class="icon" :src="rowInfo.imgUrl" style="width: 30px; height: 30px" />
      </el-col>
      <el-col :span="18">
      <div class="center">
        <span class="title" :class="{ 'only-title': !rowInfo.desc }">{{ rowInfo.title }}</span>
        <span class="desc">{{ rowInfo.desc }}</span>
      </div>
    </el-col>
    <el-col :span="3">
      <el-color-picker v-model="color" />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PropType } from 'vue'
import { IColorPicker } from './type'
defineProps({
  rowInfo: {
    type: Object as PropType<IColorPicker>,
    default: () => ({})
  }
})

const color = ref('#409eff')

</script>

<style lang="less" scoped>
.row-wrap {
  // padding: 6px 10px 0 0;
  padding-left: 10px;
  .row {
    // margin-left: 10px;
    margin: 8px 10px 8px 0;
    height: 55px;
    background: rgba(255, 255, 255, .6);
    border-radius: 6px;
    .icon {
      margin: 12px 0 0 12px;
    }
  }
}
.center {
  padding-top: 10px;
  .title, .desc {
    display: block;
  }
  .title {
    color: #333;
    font-size: 14px;
  }
  .desc {
    color:  #888;
    font-size: 12px;
  }
}

.only-title {
  line-height: 35px;
  font-size: 16px;
}
:deep(.el-color-picker) {
  width: 100%;
  margin-top: 12px;
}
:deep(.el-color-picker__trigger) {
  width: 100%;
}
</style>
